<!-- 首页-课程详情		Details -->
<template>
	<view class=" pb60">
		<view class="">
			<image style="width: 750rpx;height: 336rpx;" :src="data.img" mode="widthFix"></image>
		</view>
		<view class="w90 f d">
			<text class="fs38 bold ellipsis-2">{{data.name}}</text>
			<text class="fs30 hui p_t_20 ellipsis-2">{{data.title}}</text>
		</view>
		<view class="w90 p_t_20 ">
			<text class="fs38 bold">任课教练</text>
			<view class=" f  c p_t_20 flex-wrap">
				<view class="wd50 f  c mb15" v-for="(item,index) in data.coachList" :key="index">
					<image style="width: 68rpx;height: 68rpx;border-radius: 200rpx;"  :src="item.img" mode=""></image>
					<view class="f d ellipsis ml15">
						<text class="hui">{{item.name}}</text>
						<text class="hui fs20">教练</text>
					</view>
				</view>
				
				
			</view>
		</view>
		<view class="w90 p_t_20">
			<text class="fs38 bold">课程评价</text>
			<view class="p_t_20 bb pb15"  v-for="(item,index) in data.pjList" :key="index">
				<view class="">
					<view class="f b flex-align-center">
						<image style="width: 68rpx;height: 68rpx; border-radius: 200rpx;" :src="item.user_img" mode=""></image>
						<view class="vw80 f b">
							<text class="hui fs24 ml10">{{item.user_name}}</text>
							<text class="hui fs24">{{item.create_time}}</text>
						</view>
					</view>
					<view class="vw80" style="margin-left:90rpx;">
						<text class="fs24 hui">{{item.content}}</text>
					</view>
					<view class="vw80 fs22 p_t_25" style="margin-left:90rpx;">
						<text class="hui">课程：{{item.course_name}}</text>
					</view>
				</view>
			</view>
			
			
			<view class="senter p_t_31"  v-if="data.pjList == ''">
				<text class="fs24 hui mr10">暂无评价</text>
			</view>
			<view class="senter p_t_31" v-else @click="goallpj()">
				<text class="fs24 hui mr10">查看全部</text>
				<image style="width: 20rpx;height: 20rpx;" src="../../../static/img/018.png" mode=""></image>
			</view>
		</view>
		<view class="w90">
			<view class="p_t_40">
				<text class="fs38 bold">课程详情</text>
			</view>
			<view class="mt20">
				<rich-text  type="text" :nodes="content"></rich-text>
			</view>
		</view>
		<view class="Details-but btn-submit-box" @click="make(data.id)">
			<button type="default " style="font-size: 30rpx;height: 70rpx;line-height: 70rpx;">预约</button>
		</view>
		<view class="">
			<view class="cover" v-show="show">
					
			</view>
			<view class="Details-huod" v-show="show">
				<view class="senter fs32 p_t_150 hui bold" >
					<text>门店活动</text>
				</view>
			</view>
			<view class="Details-guan" v-show="show"  @click="show = false">
				<image style="width: 64rpx;height: 64rpx;" src="../../../static/img/020.png" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show:false,
				data:[],
				id:'',
				content:'',
				pjlength:0
			}
		},
		onLoad(option) {
			// 动态导航条文字
			uni.setNavigationBarTitle({
				title: ''
			})
			this.id = option.id
			this.init()
		},
		methods: {
			init(id){
				var json = {
					id: this.id
				}
				this.$http.post(this.$config.UrlPostcourseDetail, json).then((res) => {
					if (res.status == 1) {
						this.data = res.data
						this.pjlength = this.data.pjList.length
						console.log(this.data.pjList)
						console.log(this.data.pjList.length)
						this.content = this.formatRichText(this.data.content)
					}
				})
			},
			make(id){
				var token = uni.getStorageSync('token');
				if(token){
					uni.navigateTo({
						url:"/pages/courses/immediately/immediately?id="+id
					})
				}else{
					this.$api.openWindow('/pages/login/login')
				}
				
			},
			//全部评价
			goallpj(){
				this.$api.openWindow('/pages/index/pingjiaList/pingjiaList?id=' + this.id)
			},
			formatRichText(html) {
				// 去掉img标签里的style、width、height属性
				let newContent= html.replace(/<img[^>]*>/gi,function(match,capture){
					match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
					match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
					match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
					return match;
				});
				// 修改所有style里的width属性为max-width:100%
				newContent = newContent.replace(/style="[^"]+"/gi,function(match,capture){
					match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;');
					return match;
				});
				// 去掉<br/>标签
				newContent = newContent.replace(/<br[^>]*\/>/gi, '');
				// img标签添加style属性：max-width:100%;height:auto
				newContent = newContent.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;margin:0px auto;"');
				return newContent;
			}
			
		}
	}
</script>

<style scoped>
	.cover {
			position: fixed;
			top: 0;
			width: 100%;
			height: 100vh;
			background: #000000;
			opacity: 0.6;
			z-index: 10;
		} 
	.warps {
		/* height:180vh; */
		overflow: hidden;
		background-color: #FFFFFF;
	}
	.Details-but{
		margin-top: 116rpx;
	}
	.Details-but>button{
		width: 686rpx;
		height: 60rpx;
		line-height:60rpx;
		opacity: 1;
		background: #1f73f2;
		border-radius: 30rpx;
		font-size: 24rpx;
		color:#fff;
	}
	.Details-huod{
		width: 432rpx;
		height: 556rpx;
		opacity: 1;
		background: #ffffff;
		position:absolute;
		top:300rpx;
		left:160rpx;
		z-index:11;
	}
	.Details-guan{
		position:absolute;
		top:950rpx;
		left:340rpx;
		z-index:11;
	}
</style>
